<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="/static/bootstrap5/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /*.login-box{
            margin-top: 80px;
            margin-left: auto;
            margin-right: auto;
            border: 1px solid #ddd;
            width: 450px;
            padding: 30px; )
        }*/
        .login-box {
            /* 尺寸与布局 */
            width: min(420px, 88vw); /* 宽度微调，视觉更舒适 */
            margin: 100px auto 0; /* 增加顶部空间，更透气 */
            padding: 40px 35px; /* 增加内边距，尤其左右减少以平衡 */
            box-sizing: border-box;

            /* 视觉样式 */
            background: #ffffff;
            border: 1px solid #f0f0f0; /* 更浅的边框色 */
            border-radius: 14px; /* 更现代的圆角值 */
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); /* 更柔和的阴影 */

            /* 内部布局 */
            display: flex;
            flex-direction: column;
            gap: 28px; /* 增加子元素间距，提高可读性 */

            /* 动画效果 */
            transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);

            /* 高级细节 */
            backdrop-filter: blur(2px); /* 微妙毛玻璃效果 */
            background-color: rgba(255, 255, 255, 0.96); /* 半透明白色 */
        }

        /* 悬停效果 */
        .login-box:hover {
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
            transform: translateY(-3px);
        }

        /* 聚焦状态 */
        .login-box:focus-within {
            border-color: #4d90fe;
            box-shadow: 0 0 0 2px rgba(77, 144, 254, 0.2);
        }


    </style>
</head>
<body>

<div class="login-box">
    <h2 style="margin-bottom: 8px; color: #333;">欢迎回来</h2>
    <p style="color: #666; margin-bottom: 20px;">请登录您的账户</p>
    <!--h2 style="text-align: center;margin-bottom: 30px">用户登录</h2-->
    <form method="post" action="/login">
        <div class="mb-3" >
            <input type="text" class="form-control" name="username" placeholder="用户名">
        </div>
        <div class="mb-3">
            <input type="password" class="form-control" placeholder="密码" name="pwd">
        </div>
        <div style="text-align: center">
            <input type="submit" class="btn btn-primary" value="登  录" style="width: 100px;padding: 14px;border-radius: 8px;">
        </div>
        <span style="color: red">{{ error }}</span>
    </form>
</div>
<!--div class="login-box">
    <h2 style="margin-bottom: 8px; color: #333;">欢迎回来</h2>
    <p style="color: #666; margin-bottom: 20px;">请登录您的账户</p>
    <input type="text" placeholder="用户名或邮箱" style="padding: 14px; border-radius: 8px; border: 1px solid #eaeaea;">
    <input type="password" placeholder="密码" style="padding: 14px; border-radius: 8px; border: 1px solid #eaeaea;">
    <button style="background: #4285f4; color: white; border: none; padding: 14px; border-radius: 8px; cursor: pointer;">
        登录
    </button>
</div-->

<script src="/static/bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>
</html>